<template>
	<view class="">
		<view class="data-panel mb-20">
			<view class="flex justify-between align-center">
				<view class="flex justify-between align-center">
					<view class="flex">
						<view 
							class="tabs-item" 
							:class="dateIndex===ix?'bg-red':''"
							v-for="(im, ix) in dateTabs" 
							:key="im.value"
							@click="onDate(im,ix)"
						>
						<text>{{im.name}}</text>
						</view>
					</view>
				</view>
				<uni-icons 
					custom-prefix="iconfont" 
					type="icon-excel" 
					size="32" 
					@click="onExcel('ReportsGetStockHolderAnalyse', {date: searchData.date})" 
					color="#13227a">
				</uni-icons>
			</view>
			
			<view class="flex fsize-26 mt-30">
				<view class="pt-40 pb-40 shrink0 pr-10 width-220">
					<view>分红金额</view>
					<view class="line-red">
						<text class="">￥</text>
						<text class="fsize-40">{{amData.bonusAmount}}</text>
					</view>
				</view>
				<view class="w-100 border-l pl-60">
					<view class="flex">
						<view class="w-50">
							<view class="line-gray">带客消费额</view>
							<view>{{amData.consumeAmount}}</view>
						</view>
						<view class="w-50">
							<view class="line-gray">联创数量</view>
							<view>{{amData.stockholderNums}}</view>
						</view>
					</view>
					<view class="flex mt-30">
						<view class="w-50">
							<view class="line-gray">带客人数</view>
							<view>{{amData.userNums}}</view>
						</view>
						<view class="w-50">
							<view class="line-gray">剩余股本</view>
							<view>{{amData.stockBalance}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-list pl-0 pr-0" :style="{height:swiperHeight+'px'}">
			<zb-table
				:columns="tableColumn"
				:data="tableData"
				:border="false"
				@sort-change="onSort"
			/>
		</view>
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
	</view>
</template>

<script>
	import myCellGroup from '@/components/my-cell-group/index.vue'
	import setDate from '@/common/date.js';
	import listHeightMixin from '@/common/computedAltitude.js'
	import dwFile from '@/common/mixins/downloadFile.js'
	export default {
		mixins:[listHeightMixin, dwFile],
		components:{ myCellGroup },
		data(){
			return {
				dateIndex: 0,
				showCalendar: false,
				sdate: '',
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				dateTabs:[
					{name:'全部',value: ''},
					{name:'本月',value:`${setDate.getCurrentMonth().startDate} 到 ${setDate.getCurrentMonth().endDate}`},
					{name:'自定义',value:999}
				],
				tableColumn:[
					{ name: 'name', label: '姓名', width:93},
					{ name: 'totalNums', label: '客户数', sorter: 'custom', width:93},
					{ name: 'bonusAmount', label: '分红额', sorter: 'custom', width:93},
					{ name: 'totalAmount', label: '消费额', sorter: 'custom', width:93},
				],
				amData:{},
				tableData:[],
				searchData:{
					page: 1,
					limit: 40,
					date: ''
				},
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
			}
		},
		onLoad() {
			this.getPageList()
		},
		methods: {
			onSort(column,model,index){
				this.tableData = []
				this.searchData.page = 1
				this.searchData.orderField = column.name
				this.searchData.orderDirection = model
				this.getPageList()
			},
			getPageList(){
				this.$reqPost('ReportsGetStockHolderAnalyse',this.searchData).then(res=>{
					this.amData = res.data.stock
					this.tableData = [...this.tableData, ...res.data.list]
					if (res.count > this.tableData.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			confirmDate(dates){
				if(this.dateIndex === index && this.dateIndex!==2) return
				this.dateIndex = index
				if(index === 2){
					this.showCalendar = true
				}else {
					this.dateTabs[2].name = '自定义'
					this.searchData.date = row.value
					this.onSearch()
				}
			},
			onSearch(){
				this.searchData.page = 1
				this.tableData = []
				this.getPageList()
			},
			onDate(row,index){
				if(this.dateIndex === index && this.dateIndex!==2) return
				this.dateIndex = index
				if(index === 2){
					this.showCalendar = true
				}else {
					this.dateTabs[2].name = '自定义'
					this.searchData.date = row.value
					this.onSearch()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-panel{
		padding:10px;
		font-size: 14px;
		background-color: #fff;
		.tabs-item{
			padding:4px 6px;
			border-radius:2px;
		}
	}
</style>